<template>
	<view class="">
		<mg-cell cname='bt' ht="基本设置" htc='c3 wei f30' last='1' />
		<view class="bf">
			<mg-input v-model="params.sort" isr='1' ht='分类排序' htc='c3 f30' pr='请输入分类排序' icn='f30 c3 t-r' t='number' />
			<mg-input v-model="params.name" isr='1' ht='分类名称' htc='c3 f30' pr='请输入分类名称' icn='f30 c3 t-r' />
			<mg-ta title='分类描述' th='100' max='50' v-model="params.describe"></mg-ta>
			<mg-cell cname="p332" isr='1'>
				<template slot='bd'>
					<view class="c3 f30">分类图标</view>
					<mg-photo :w='uploadArr[0].w' :max='uploadArr[0].max' :mark='uploadArr[0].mark'
						:pkey='uploadArr[0].pkey' :file-list='uploadArr[0].fileList' @change-img='changeImg' />
				</template>>
			</mg-cell>
			<mg-cell cname="p03" ht="分类属性" htc='f30' isr='1'>
				<view slot='bd'>
					<mg-radio rcname='f-x-e' v-model="params.isRequire" :arr='flsxArr'></mg-radio>
				</view>
			</mg-cell>
			<view v-show="params.isRequire==3">
				<mg-input v-model="params.customName" max='4' isr='1' icn='f30 c3 t-r' pr='请输入自定义属性名称' />
			</view>
			<view class="p13 c9 f22">设置为下单必选分类后，顾客必须选择下单必选分类中至少一个商品才能成功下单，自定义属性名称最多4个文字</view>
			<mg-cell cname="p03" ht="显示状态" htc='f30' isr='1'>
				<view slot='bd'>
					<mg-radio rcname='f-x-e' v-model="params.timeType" :arr='xsztArr'></mg-radio>
				</view>
			</mg-cell>
			<view v-show="params.timeType==2">
				<mg-cell cname="p03" ht="选择周几" htc='f30' isr='1'>
					<view slot='bd'>
						<mg-checkbox rcname='f-x-e' v-model="params.weekStr" :arr='weekArr'></mg-checkbox>
					</view>
				</mg-cell>
				<mg-cell isr='1' ht="选择时间段">
					<view slot='bd' class="f-y-c">
						<view @click="toggleTab('time1')" class="f-1 t-c">{{params.startTime||'开始日期'}}</view>
						<view>至</view>
						<view @click="toggleTab('time2')" class="f-1 t-c">{{params.endTime||'结束日期'}}</view>
					</view>
				</mg-cell>
			</view>
		</view>
		<view class="foot-btnc p-r" style="padding-top: 100rpx;">
			<button @click="save" :disabled="loading" :loading="loading" class="foot-btn"
				:style="{background:fColor}">保存</button>
		</view>
		<w-picker mode="time" defaultVal="08:00:00" :current="false" :hasSecond="false"
			@confirm="onConfirm($event,'time1')" ref="time1" step="1"></w-picker>
		<w-picker mode="time" defaultVal="08:00:00" :current="false" :hasSecond="false"
			@confirm="onConfirm($event,'time2')" ref="time2" step="1"></w-picker>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import steps from '@/components/third/steps.vue'
	import mgCell from '@/components/common/mg-cell.vue'
	import mgInput from '@/components/form/mg-input.vue'
	import mgPhoto from '@/components/form/mg-photo.vue'
	import mgLabel from '@/components/form/mg-label.vue'
	import mgRadio from '@/components/form/mg-radio.vue'
	import mgCheckbox from "@/components/form/mg-checkbox.vue"
	import mgAgree from '@/components/form/mg-agree.vue'
	import mgTa from '@/components/form/mg-ta.vue'
	import wPicker from "@/components/form/w-picker.vue";
	import utils from '@/common/utils.js'
	import {
		uploadImg
	} from '@/common/wechat-util.js'
	import {
		utilMixins
	} from "@/common/util-mixins.js"
	export default {
		name: 'my-add-info',
		components: {
			steps,
			mgCell,
			mgInput,
			mgPhoto,
			mgLabel,
			mgRadio,
			mgCheckbox,
			mgAgree,
			mgTa,
			wPicker,
		},
		data() {
			return {
				loading: false,
				uploadArr: [{
					mark: '0',
					pkey: 'icon',
					w: '174rpx',
					max: '1',
					fileList: [],
					uploadList: [],
				}],
				params: {
					id: '',
					pid: '',
					sort: '',
					name: '',
					describe: '',
					icon: [],
					isRequire: '2',
					timeType: 1,
					customName: '',
					weekStr: [],
					startTime: '',
					endTime: '',
					type: '',
				},
				flsxArr: [{
						value: 2,
						name: '无'
					},
					{
						value: 1,
						name: '必选',
					},
					{
						value: 3,
						name: '自定义'
					},
				],
				xsztArr: [{
						value: 1,
						name: '不限制'
					},
					{
						value: 2,
						name: '按时间段显示',
					}
				],
				weekArr: [{
						value: '周一',
						name: '周一'
					},
					{
						value: '周二',
						name: '周二',
					},
					{
						value: '周三',
						name: '周三'
					},
					{
						value: '周四',
						name: '周四'
					},
					{
						value: '周五',
						name: '周五'
					},
					{
						value: '周六',
						name: '周六'
					},
					{
						value: '周日',
						name: '周日'
					},
				],
			}
		},
		onLoad(options) {
			console.log(options)
			this.util.setNT('分类设置')
			this.params.type = options.type
			this.params.pid = options.pid || ''
			if (options.id && !options.pid) {
				this.util.request({
					'url': this.api.spfllb,
					data: {
						id: options.id,
					},
				}).then(res => {
					for (let k in this.params) {
						if (k == 'icon') {
							this.params[k] = res.data[k].split(',')
						} else {
							this.params[k] = res.data[k]
						}
					}
					this.uploadArr[0].fileList = res.data.icon ? res.data.icon.split(',') : [],
						this.params.type = options.type
					// console.log(this.params)
				})
			}
		},
		mixins: [utilMixins],
		computed: {},
		methods: {
			changeImg(e) {
				this.uploadArr[e.mark].uploadList = this.params[e.pkey] = e.p
			},
			chooseLocation() {
				uni.chooseLocation({
					success: (res) => {
						this.params.address = res.address + res.name
						this.params.lat = res.latitude
						this.params.lng = res.longitude
						console.log(res)
					}
				})
			},
			//选择标签
			labelChange(e) {
				// let j = {}
				// e.map(v => {
				// 	j[v.id] = v.name
				// })
				let j = e.map(v => v.name)
				this.params.service = j
			},
			tcsm() {
				uni.setStorageSync('fwb', this.meal.body)
				this.go({
					t: 1,
					url: `/yb_o2o/my/other/gywm?t=${this.meal.name}&p=9`
				})
				console.log(this.meal)
			},
			//
			radioChange(e) {
				this.getType()
			},
			getType() {
				let i = this.tcArr.find(v => v.id == this.params.mealId)
				this.meal = i
			},
			toggleTab(str) {
				this.$refs[str].show();
			},
			onConfirm(e, key) {
				console.log(e, key);
				switch (key) {
					case "time1":
						this.params.startTime = e.result
						break;
					case "time2":
						this.params.endTime = e.result
						break;
				}
			},
			xzsj() {
				uni.setStorageSync('yysd', this.times)
				this.go({
					t: 1,
					url: 'yysj?t=1&r=' + this.params.timeLimit
				})
			},
			getTime(e) {
				this.params.timeLimit = e.radio
				this.params.time = e.time
				this.times = e.times
				console.log(e)
			},
			async save() {
				// for (let i in this.params) {
				// 	console.log(`%c ${i} `,
				// 		'color: white; background-color: #07c160', this.params[i])
				// }
				let arr = []
				let filterArr = ['id', 'pid', 'sort', 'icon', 'describe', 'customName', 'weekStr', 'startTime',
						'endTime',
						'type'
					]
					.concat(arr)
				let judgeData = utils.isFailParams({
					field: this.params,
					filter: filterArr,
					tips: {
						name: '输入分类名称',
						isRequire: '1',
						timeType: 1,
					}
				})
				if (!judgeData) {
					return
				} else {
					this.loading = true
					let params = utils.deepCopy(this.params)
					this.util.showLoading('图片上传中')
					Promise.all(this.uploadArr.map(item => {
						return uploadImg({
							files: item.uploadList
						})
					})).then(async fres => {
						params.icon = fres[0].toString()
						// console.log(fres, params)
						// return
						let res = await this.util.request({
							'url': this.api.tjspfl,
							ct: 1,
							method: 'POST',
							mask: 1,
							data: params,
						}).catch(res => {})
						if (!res) {
							this.loading = false
						} else {
							this.util.message('保存成功', 1, 1000)
							utils.swnb(1000)
						}
					})
				}
			},
		},
	}
</script>

<style scoped lang="scss">

</style>
